<template>
	<view class="register">
		<u-navbar :is-back="true" title="注册" :background="background" :border-bottom="false" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view class="content">
			<!-- 头部logo -->
			<view class="header" style="height: 400rpx;position: relative;">
				<view style="width: 50px;height: 50%;position: absolute;left: 0;top: 0;z-index: 1000;"  @click="navigateBack"></view>
				<view class="header" style="height: 400rpx;position: relative;color: #fff;letter-spacing: 2px;">
					<image src="../../static/images/login/login1.png" style="position: relative;top: -2px;"></image>
					<view style="position: absolute;left: 15px;bottom:250rpx;font-size: 30px;">WELCOME</view>
					<view style="position: absolute;left: 15px;bottom: 200rpx;font-size: 16px;">欢迎注册</view>
				</view>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput
						v-model="phoneData"
						type="text"
						maxlength="11"
						placeholder="请输入手机号"
					></wInput>
					<wInput
						v-model="passData"
						type="password"
						maxlength="11"
						placeholder="请设置密码"
						isShowPass
					></wInput>
					<wInput
						v-model="agingPassData"
						type="password"
						maxlength="11"
						placeholder="请确认密码"
						isShowPass
					></wInput>
				</view>
				<view @click="startReg()"><view class="register-btn">注册</view></view>
				<view class="radio-group">
					<u-radio-group v-model="groupValue">
						<u-radio active-color="red" name="agreen">
							<view @click.stop="navigatorTo()">我同意相关协议与隐私政策</view>
						</u-radio>
					</u-radio-group>
				</view>
				<!-- <wButton 
					text="注 册"
					:rotate="isRotate" 
					bgColor="linear-gradient(to right, rgba(85, 85, 255, 0.7), rgba(0, 170, 127, 0.6))"
					@click.native="startReg()"
				></wButton> -->
			
			<!-- 底部信息 -->
			<!-- <view class="footer">
				<text 
					@tap="isShowAgree" 
					class="cuIcon"
					:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
				>同意</text>
				<navigator url="../agreement/agreement" open-type="navigate">《协议》</navigator>
			</view> -->
		</view>
	</view>
</template>

<script>
	var that;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		computed:mapGetters(['userInfo','api','background']),
		data() {
			return {
				groupValue:'agreen',
				phoneData:'', // 用户/电话
				passData:'', //密码
				agingPassData:'',//确认密码
				verCode:"", //验证码
				showAgree:true, //协议是否选择
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton,
		},
		mounted() {
			that= this;
		},
		methods: {
			navigatorTo(){
				uni.navigateTo({
					url: '/pages/agreement/agreement',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navigateBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			isShowAgree(){
				//是否选择协议
				that.showAgree = !that.showAgree;
			},
			getVerCode(){
				//获取验证码
				if (that.phoneData.length != 11) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				}
				if(that.agingPassData!=that.passData){
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '两次密码不一致'
					});
					return
				}
				let req={
					params:{
						mobile:that.phoneData,
						username:that.phoneData,
						password:that.passData
					},
					active:'register',//发送手机验证码
					type:'register',//注册
				}
				console.log(that.GLOBAL);
				that.GLOBAL.doCloud('user-center',req).then(res=>{
					console.log(res);
				})
				
				// console.log("获取验证码")
				// this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				// uni.showToast({
				//     icon: 'none',
				// 	position: 'bottom',
				//     title: '模拟倒计时触发'
				// });
				
				// setTimeout(function(){
				// 	that.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
				// },3000)
			},
		    startReg() {
				//注册
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.showAgree == false) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '请先同意《协议》'
				    });
				    return false;
				}
				if (this.phoneData.length !=11) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				}
		        if (this.passData.length < 6) {
		            uni.showToast({
		                icon: 'none',
						position: 'bottom',
		                title: '密码不正确'
		            });
		            return false;
		        }
				// if (this.verCode.length != 4) {
				//     uni.showToast({
				//         icon: 'none',
				// 		position: 'bottom',
				//         title: '验证码不正确'
				//     });
				//     return false;
				// }
				let req={
					params:{
						username:that.phoneData,
						password:that.passData
					},
					active:'register',//注册
				}
				that.GLOBAL.doCloud('user-center',req).then(res=>{
					console.log(res);
					that.isRotate=false
					if(res.code==0){
						uni.showToast({
							title: res.msg
						});
						uni.navigateBack({
							delta: 1
						});
					}
					
				})
				
				// let req={
				// 	password:that.passData,
				// 	phone:that.phoneData,
				// 	showLoad:false
				// }
				// that.GLOBAL.doPost(that.api.GLOBAL_tsAccount_register,req).then((res)=>{
				// 	if(res.code==200){
				// 		uni.showToast({
				// 			title: '注册成功'
				// 		});
				// 		setTimeout(()=>{
				// 			uni.navigateBack({
				// 				delta:1
				// 			})
				// 		},1200)
				// 	}
				// })
		    }
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>